import { useState } from "react";
import { Form, Input, message } from 'antd';
import { layout2 } from '@/utils/config';
import CommonModal from "@/components/CommonModal";
import CommonLoading from "@/components/CommonLoading";
import { addAreaCodeOp } from '../service';

export default ({ visible, handleOk, handleCancel }) => {

  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const onOk = () => {
    form.validateFields().then(async res=>{
      const { name } = res;
      setLoading(true);
      const { success } = await addAreaCodeOp({ name });
      setLoading(false);
      if(success){
        message.success('新增区域编码成功！')
        handleOk();
      }
    })
  }

  return (<CommonModal
    visible={visible}
    title='添加区域编码'
    width='480px'
    minHeight="140px"
    onOk={onOk}
    onCancel={handleCancel}
  >

    <Form
      form={form}
      {...layout2}
      name='add-area-code-modal'
    >
      <Form.Item
        name="name"
        label="区域编码"
        rules={[{required:true}]}
      >
        <Input />
      </Form.Item>
    </Form>

    <CommonLoading loading={loading} />
  </CommonModal>)
}